<template>
    <div class="w750">
      <!-- 积分明细 -->
      <div class="account-det" :class="themes.theme">


        <van-tabs v-model="active" :color="themes.color" :title-active-color="themes.color"  @change="switchType"  sticky :offset-top='0'>
          <van-tab :title="item.name" v-for="(item, index) in navArr" :key="index">
            <template v-if="integralDet && integralDet.length">
              <van-list
                v-if="paging.tab"
                v-model="paging.loading"
                :finished="paging.finished"
                :finished-text="!paging.emptylist?'没有更多了':''"
                @load="onLoad"
                :immediate-check="false"
                :error.sync="paging.error"
                error-text="请求失败，点击重新加载"
              > 
                <!-- 支出，收入 -->
                <div class="account-det-list" v-show="flag">
                    <div class='item' :class="item.type == 0 ? 'red' : 'cur' " v-for="(item,index) in integralDet" :key="index">
                        <div class="item-left">
                            <p class="txt">{{item.logType}}</p>
                            <span class="time">{{ item.createDate | dateformat('YYYY-MM-DD HH:mm:ss')}}</span>
                        </div>
                        <div class="item-right">
                            <span class="price">{{item.type == 0 ? '- ' : '+'}}<em class="now">{{item.integralNum}}</em></span>
                        </div>
                    </div>
                </div>

                <!-- 冻结 -->
                <div class="account-det-list" v-show="!flag">
                    <div class='item' :class="item.status == 1 ? 'red' : 'cur' "  v-for="(item,index) in integralDet" :key="index">
                        <div class="item-left">
                            <p class="txt">
                              <em style="color:red" v-if="item.status == 0">【冻结中】</em>
                              <em style="color:red" v-if="item.status == 1">【已解冻】</em> 
                              <em style="color:red" v-if="item.status == -1">【已回收】</em>{{item.freezeType}}
                            </p>
                            <span class="time">{{ item.createDate | dateformat('YYYY-MM-DD HH:mm:ss')}}</span>
                        </div>
                        <div class="item-right">
                            <span class="price">{{item.status == -1 ? '- ' : '+'}}<em class="now">{{item.integralNum}}</em></span>
                        </div>
                    </div>
                </div>

              </van-list>
            </template>

          </van-tab>
        </van-tabs>
        
        
        <Noempty :pic="require('@/assets/images/order-empty.png')"  :title="`您暂无相关${integralName}明细`" v-if="paging.emptylist && !paging.error"  />


      </div>
      <!-- /积分明细 -->
	</div>
</template>

<script>
import Noempty from 'components/Noempty/Noempty'
import { integralLog, freezeIntegral} from "api/pointsApi";
import {mapState} from 'vuex'
import PageUtil from 'utils/PageUtil';
// 积分收入明细
const integralPageUtil = new PageUtil(integralLog, {field: {
    list: "integralDet"
}});
//积分冻结明细
const freezeIntegralPageUtil = new PageUtil(freezeIntegral, {field: {
    list: "integralDet"
}});
export default {
  data() {
    return {
      integralDet: [],
      active: 0,
      Nomsg: false,
      navArr: [{name: "收入",id:1},{name: "支出",id:0},{name: "冻结",id:3}], //tab
      type: '',
      status: 1,
      flag: true,  //收入，支付   否则就冻结
      paging: {
        tab: false,
				loading: false,
				finished: false,
				error: false, // 是否错误
				emptylist: false,// 是否显示列表为空时的样式
			},
    };
  },
  components: {
    Noempty
  },
  mounted() {
    let that = this

    let params = {type: this.status}
    integralPageUtil.loadListByPage(that, params);
  },
  methods: {

    //切换列表
    switchType(e) {
      let numberMap = {
        0: {flag: true,type:1},
        1: {flag: true,type:0},
        2: {flag:false,type: ''}
      }
      numberMap[e].flag ? integralPageUtil.loadListByPage(this, {type: this.status = numberMap[e].type}) : freezeIntegralPageUtil.loadListByPage(this);
      this.flag =  numberMap[e].flag 
    },

    onLoad() {
      this.flag ? integralPageUtil.loadListByPageMore() : freezeIntegralPageUtil.loadListByPageMore()
    },
  },
  beforeRouteEnter (to, from, next) {
		next(vm => {
			vm.$nextTick(()=> {
				to.meta.titleName = vm.$store.state.integralName + '明细'
				to.meta.title =  vm.$store.state.integralName + '明细'
				document.title = vm.$store.state.integralName + '明细'	
			})
		})
	},
  computed: {
    ...mapState(['themes']),
		...mapState(["integralName"]),
  }
  
};
</script>

<style src="../../assets/css/style/my-style.css" scoped></style>
<style src="../../assets/css/pre-deposit.css" scoped></style>
<style lang="stylus" scoped>
.item {
  &.red {
    .price {
      color: red
    }
  }
}
</style>